@extends('layouts.back_stage')
@section('content') 
  <style>
  #app{padding:20px}
  [v-cloak] {display: none;}
  .table_margin{padding:40px 10px 40px 40px;background:#fff;margin:10px 40px 0 0px}
  .ingred_sel{width:180px;margin-left:10px}
  .but_client{text-align:right ;margin-top:10px;background:#fff;padding-right:20px} 
  .Transfer{margin-top:20px;}
  .transfer-footer {
    margin-left: 20px;
    padding: 6px 5px;
  }
  ::-webkit-scrollbar {height: 8px;}
  </style>
  <div class="container">
      <div style="padding:20px 20px 20px 0;overflow:hidden;"><h3 style="float:left;">添加部门信息</h3></div>
      <div class="page-body" id="app" v-cloak>
         <div class="table_margin">
            <div class="client_name">
            <label>部门名 ：&nbsp; &nbsp;&nbsp;</label>
              <el-input  class="ingred_sel" size="small" @blur="handleSelect"  maxlength='8' v-model="company_a" placeholder="请输入"></el-input>
            <label>所属机构 ：&nbsp;&nbsp;</label>
                  <el-cascader style="width:300px;" :options="companyList" v-model="company_id" :change-on-select="true" size="small"></el-cascader>
            </div>
            <div class="but_client">
                <el-button  class="touching" @click="home" size="small" >取消</el-button>
                <el-button type="primary" class="touching" @click=clientCommit size="small" >保存</el-button>   
            </div>
            <div class="Transfer" >
                <template>
                    <el-transfer  v-model="value1"  filterable :titles="['所有成员','新部门成员']" @change="shiftClient" :data="data"></el-transfer>
                </template>
            </div>
         </div>
      </div>
  </div>
 <script>
   new Vue({
        el: '#app',
        data() {          
         return {  
              state1: '',//所以部门查询
              company_a:'',
              data: [],
              value1: [],//这个是新增部门里面的值
              shiftId:[],//用来装移动了成员的id  
              name_client:'',//装新增部门名  
              company_id:[],
              companyList:[],
            };
          },
       methods: {
        getCompanyList(){
           let that=this
           let list=[]
                $.ajax({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content'),
                        'contentType':'application/json'
                    },
                    url: '/clients/getall',
                    type: 'get',
                    dataType: 'json',
                    success:res=>{
                      if(res.result.success){
                            for(let value of res.content[1]){
                                value['value'] = value.id
                                value['label'] = value.company_name
                                let child_data = res.content[1].filter((n) => n.pid == value.id && n.id != value.id)
                                if(child_data.length > 0){
                                    value['children'] = child_data
                                }
                            }
                            this.companyList = res.content[1].filter((n) => n.id == res.content[0])
                        }else{
                            this.$notify.error({
                                title: '错误',
                                message: res.result.errorMsg
                            })
                        }
                    }
                })
            },
         //用来装移动了成员的id 
        shiftClient(id){
          let that=this
              that.shiftId=id
        },
         //提交 保存 按钮
         clientCommit(){
           var client=''
          if(this.company_a==''){
                this.$notify.error({
                      title: '提示',
                      message: '请输入部门名',
                  });
                  return false;
                }
           if(this.company_id==''){
                  this.$notify.error({
                        title: '提示',
                        message: '请选择机构',
                    });
                    return false;
                  }
          let that=this
                this.$confirm('你确定保存此操作内容吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                  type: 'warning'
                }).then(() => {
                  client=this.company_id[this.company_id.length-1]
                  $.ajax({
                    type:'post',
                    url:'/departments/store',
                    dataType:'json',
                     data:{
                      name:that.name_client,
                      employee:that.shiftId,
                      company_id:client
                     }
                  }).then(function(res){
                    if(res.result.success==true){
                       window.location.href='/departments/showpage';
                    }else{
                      that.$notify.error({
                              title: '错误',
                              message:res.result.errorMsg
                          });
                      }
                  })
                  this.$message({
                    type: 'success',
                    message: '保存成功!'
                  });
                }).catch(() => {
                  this.$message({
                    type: 'info',
                    message: '已取消保存'
                  });          
              });
         },
         //点击取消
         home(){
           window.location.href='/departments/showpage';
         },
         //所以员工
         employees(){
              let that=this
              var employees=[]
              var obj={
                 label:'',
                 pinyin:'',
                 key:'',
                 company_id:'',
                 client_id:'',
                 department_id:''
                  }
              $.ajax({
                  type:'get',
                  url:'/departments/employees',
                  dataType:'json',
                  success:function(res){       
                    var empioyarr=res.content
                        for(let e in  empioyarr){
                            employees.push({
                              label:empioyarr[e].admin_name,
                              key:empioyarr[e].id,
                           })
                      } 
                      that.data=employees
                  }
              })
          },
         //所以部门查询
            allClienn(){
              var that=this;
              var aa=[] 
              $.ajax({
                  type:'get',
                  url:'/departments/index',
                  dataType:'json',
                  success:function(res){
                    for(var i=0;i<(res.content.data).length;i++){
                      aa.push((res.content.data)[i])
                    }
                  }
              })
            },
          handleSelect(e) {
            this.name_client=e.currentTarget.value
          },
        },
        mounted() {
           this.allClienn();
           this.employees();
           this.getCompanyList();
        },
   });   
 </script>
@endsection